<script setup lang="ts">
withDefaults(defineProps<{ title: string, desc?: string, tags?: string[] }>(), { desc: '', tags: () => [] })
</script>

<template>
  <div class="card card-hover reveal animate-fade-up p-5">
    <div class="mb-4 rounded-xl bg-gray/10 h-36" />
    <h3 class="font-700 mb-1">
      {{ title }}
    </h3>
    <p class="text-sm mb-3 opacity-80">
      {{ desc }}
    </p>
    <div class="flex flex-wrap gap-2">
      <span v-for="t in tags" :key="t" class="chip">{{ t }}</span>
    </div>
  </div>
</template>
